<%--
  Created by IntelliJ IDEA.
  User: Mikey
  Date: 2017/8/17
  Time: 16:43
  To change this template use File | Settings | File Templates.
--%>
    <style>
        #five_chess{
            float: left;
            height: auto;
            background-image: url("/static/image/background.jpg");
        }
        .block{
            position: relative;
            float: left;
        }
        .block hr{
            background: black;
            position: absolute;
            margin: 0;
            border-top : 0;
        }
        .horizontal{
            height: 2px;
            width: 100%;
        }
        .vertical {
            width: 2px;
            height: 100%;
        }
        .white_block{
            background: white;
        }
        .black_block{
            background: black;
        }
        .transparent{
            background: transparent !important;
        }
    </style>
    <body>
        <div id="app">
            <h4>第{{block_click_num}}步</h4>
            <h4>棋盘大小：<span>{{block_width_num}}×{{block_width_num}}</span></h4>
            <button type="button" class="btn btn-primary" @click="reload">再来一局</button>
            <button type="button" class="btn btn-primary" @click="withdraw">悔棋</button>
            <div id="five_chess">
                <div v-for="block_j in block_width_num">
                    <div class="block" :data-index="block_i+'-'+block_j" v-for="block_i in block_width_num" @click="click_block($event,block_i,block_j)">
                        <hr class="horizontal" />
                        <hr class="vertical" />
                    </div>
                </div>
            </div>
        </div>
    </body>
<script>
    (function () {
        initVue();
    }());
    var vm;
    function initVue() {
        vm = new Vue({
            el : "#app",
            data : {
                block_width_num : 15,
                block_colors : [{
                    color : "black_block",
                    msg : "黑方胜"
                },{
                    color : "white_block",
                    msg : "白方胜"
                }],
                block_width : 0,
                block_click_num : 0,
                block_now_color : null,
                transparent : 'transparent',
                record : [],
            },
            mounted : function (){
                this.eventListen();
            },
            methods : {
                initStyle : function (){
                    var chess_width = parseInt($('#five_chess').css("width"));
                    $(".block").css("width",chess_width/this.block_width_num);
                    $(".block").css("height",chess_width/this.block_width_num);
                    $(".block").css("border-radius",chess_width/this.block_width_num);
                    $(".horizontal").css("margin-top",chess_width/this.block_width_num/2);
                    $(".vertical").css("margin-left",chess_width/this.block_width_num/2);
                },
                eventListen : function (){
                    $('#five_chess').css('width',$(document.body).width()*0.35);
                    this.initStyle();
                    $(window).resize(function () {          //当浏览器大小变化时
                        $('#five_chess').css('width',$(document.body).width()*0.35);
                        this.initStyle();
                    }.bind(this));
                },
                reload : function () {
                    location.reload();
                },
                click_block : function (e,i,j){
                    if(this.block_click_num === -1){
                        alert("游戏结束");
                        return;
                    }
                    var obj = e.currentTarget;
                    if(!$(obj).hasClass(this.block_colors[0].color)&&!$(obj).hasClass(this.block_colors[1].color)){
                        this.block_click_num++;
                        $(obj).toggleClass(this.block_colors[this.block_click_num%2].color);
                        $(obj).find('hr').toggleClass(this.transparent);
                        this.record.push(obj);
                        this.block_now_color = this.block_colors[this.block_click_num%2].color;
                        this.hasSuccess(i,j);
                        if(this.block_click_num === this.block_width_num*this.block_width_num){
                            this.block_click_num = -1;
                            alert("平局");
                        }
                    }
                },
                getClass : function (obj){
                    var value = $(obj).attr('class').split('block ')[1];
                    if(value){
                        return value;
                    }else {
                        return 'block';
                    }
                },
                withdraw :  function () {
                    if(this.block_click_num === 0){
                        alert("无法悔棋");
                        return;
                    }
                    if(this.block_click_num === -1){
                        alert("游戏结束");
                        return;
                    }
                    $(this.record[this.record.length-1]).toggleClass(this.block_colors[this.block_click_num%2].color);
                    $(this.record[this.record.length-1]).find('hr').toggleClass(this.transparent);
                    this.block_click_num--;
                    this.record.splice(this.record.length-1,1);
                },
                hasSuccess : function (i,j){
                    var postion = ['top','right','bottom','left','top_right','bottom_right','bottom_left','top_left'];
                    for(p in postion){
                        this.dealSuccess(postion[p],i,j);
                    }
                },
                dealSuccess : function (postion,i,j){
                    var success_num = 1;
                    for(var x = 0; x < 4; x++){
                        if(postion.indexOf('top') !== -1){
                            if(j <= 1) break;
                            j--;
                        }
                        if(postion.indexOf('bottom') !== -1){
                            if(j >= this.block_width_num) break;
                            j++;
                        }
                        if(postion.indexOf('left') !== -1){
                            if(i <= 1) break;
                            i--;
                        }
                        if(postion.indexOf('right') !== -1){
                            if(i >= this.block_width_num) break;
                            i++;
                        }
                        if(this.getClass('div[data-index="'+i+'-'+j+'"]')&&this.getClass('div[data-index="'+i+'-'+j+'"]')===this.block_now_color){
                            success_num++;
                            if(success_num === 5){
                                this.block_click_num = -1;
                                alert(this.block_now_color===this.block_colors[0].color?this.block_colors[0].msg:this.block_colors[1].msg)
                            }
                        }
                    }
                },

            }
        })
    }
</script>
